<template>
  <el-dialog
    :title="view === 'import'? '员工信息导入': '员工积分导入'"
    :visible="true"
    custom-class="dialogWrapper dialogWrapper_ins"
    :before-close="closeDialog">
    <el-form :model="formData" label-width="140px" ref="ruleForm" :rules="rules">
			<el-form-item v-if="view === 'import'" label="员工信息导入模板">
				<el-button size="small" type="info" @click="download">下载</el-button>
			</el-form-item>
			<el-form-item v-if="view === 'integralimport'" label="员工积分导入模板">
				<el-button size="small" type="info" @click="integraldownload">下载</el-button>
			</el-form-item>
			<el-form-item label="上传excel流">
        <el-upload
				  class="upload-demo"
				  :action="baseUrl()"
				  :auto-upload = "false"
				  :on-remove="handleRemove"
				  :on-change="handleChange"
				  accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
				  multiple
				  :limit="3"
				  :on-exceed="handleExceed"
				  :file-list="fileList">
				  <el-button size="small" type="info">点击上传</el-button>
				  <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
				</el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="info" @click="submit('ruleForm')" :disabled="Subabled">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { oneFile } from "@/services/getFromData";
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
import editorImage from "@/components/Tinymce/components/editorImage";
var serialize = require('form-serialize');
export default {
  name: "import-staff",
  data () {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择权限'));
      } else {
        callback();
      }
    }
    return {
      menus: [],
      list: [],
			file:{},
			fileList:[],
      formData: {
        companyNo:""
			},
      imgShow:"",
      Subabled:false,
      dialogImageUrl: '',
      dialogVisible: false,
      dialogFormVisible: false,
      menuInfo: [],
      rules: {
      }
    }
  },
  props: {
    view: {
      type: String,
      default: "Import"
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    baseUrl(){
    	return "";
    },
		handleRemove(file, fileList) {
    	console.log(file, fileList);
 	  },
    handleChange(file,fileList){
    	  if(fileList.length > 1){
    	  	if(document.getElementsByClassName("el-upload-list__item")[0].firstChild.nodeName === 'IMG'){
    	  		this.$message.warning('当前限制选择 1个文件,多个文件覆盖第一个');
		    		var thisNode = document.getElementsByClassName("el-upload-list__item")[1];
		    		thisNode.parentNode.removeChild(thisNode);
    	  	}else{
    	  		this.$message.warning('当前限制选择 1个文件,多个文件覆盖第一个');
		    		var thisNode = document.getElementsByClassName("el-upload-list__item")[0];
		    		thisNode.parentNode.removeChild(thisNode);
    	  	}
	    	}
    	  var isEXL = ""
    	  if(file.raw.type === 'application/vnd.ms-excel' || file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'){
    		  isEXL = true
    	  }else{
    		  isEXL = false
    	  }
        const isLt10M = file.size / 1024 / 1024 < 10;
        if (!isEXL) {
          this.$message.error('只能上传Excel文档!');
        }
        if (!isLt10M) {
          this.$message.error('上传Excel文档大小不能超过 2MB!');
        }
        return isEXL && isLt10M;
    },
		handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		},
		download(){
			// 下载导入Excel模板
				window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");
		},
		integraldownload(){
			// 下载导入Excel模板
				window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");
		},
    submit(formName) {
			this.Subabled = true;
			this.butTimeOut();
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            	var sref = this;
            	//把图片的信息和参数放进请求头里
            	let code = await oneFile({
								companyNo:this.formData.companyNo
				      },"/ecshop/staff/resolveCompanyStaffExcelTemplate.do","file").then(
								function(data){
									sref.$message({
										showClose: true,
										message: data,
										type: "success"
									});
									sref.$emit("close", true);
								}, 
								function(reason, data){
									sref.$message({
										showClose: true,
										message: reason,
										type: "error"
									});
								});
          } catch (e) {
            if (e instanceof RequestError) {
              this.$alert(e.message, "提示", {
                type: "error",
                confirmButtonText: "确定"
              });
            } else {
              throw e;
            }
          }
        } else {
          return;
        }
      });
		},
		butTimeOut(){
			var serf = this;
			setTimeout(function(){
				serf.Subabled = false;
			},1200)
		}
  },
  mounted() {},
  components: {
      'editorImage': editorImage
    }
};
</script>
<style>
.dialogWrapper {
	width: 720px;
}
.dialogWrapper_ins{
	padding-right: 50px;
}
.el-select {
  width: 100%;
}
.el-textarea__inner{
	height: 100px;
	resize:none;
}
.editImg{
	  overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    margin: 0 8px 8px 0;
    display: inline-block;
    float: left;
}
.editImg img{
	width: 100%;
	height: 100%;
}
</style>
